<template>
   <footer class="footer">
       <ul>
           <router-link tag="li" to="/movie">
               <i class="iconfont icon-movie"></i>
               <p>电影</p>
           </router-link>
           <router-link tag="li" to="/cinema">
               <i class="iconfont icon-cinema"></i>
               <p>影院</p>
           </router-link>
           <router-link tag="li" to="/mine">
               <i class="iconfont icon-mine"></i>
               <p>我的</p>
           </router-link>
       </ul>
   </footer>
</template>

<script>
export default {
    name: 'TabBar'
}
</script>

<style lang="scss" scoped>
.footer { 
    position: fixed; 
    left: 0; 
    bottom: 0;
    width: 100%; 
    height: 50px; 
    background: $color; 
    border-top: 2px #ebe8e3 solid; 
    ul { 
        height: 50px;
        @include flex-align;
        text-align: center;
        li { 
            flex: 1; 
            height: 40px;
            i{ 
                font-size: 20px;
            }
             p{ 
                font-size: 12px; 
                line-height: 18px;
            }
         }
         .my-active {
            color: #f03d37;
         }
    }
} 



</style>
